<template>
  <div class="page-container">
    <div class="register-container">
      <h2>注册</h2>
      <el-form ref="registerForm" :model="registerForm" :rules="rules" label-position="top" @submit.prevent="handleRegister">
        <el-form-item label="账号" prop="no">
          <el-input v-model="registerForm.no" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="registerForm.name" placeholder="请输入名字"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="registerForm.age" type="number" placeholder="请输入年龄" min="1"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="registerForm.sex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="registerForm.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
          <el-button type="text" @click="goToLogin">已有账号？去登录</el-button>
        </el-form-item>
      </el-form>
      <!-- 添加消息显示区域 -->
      <div v-if="message" :class="['message', messageType]">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Register',
  data() {
    return {
      registerForm: {
        no: '',
        name: '',
        password: '',
        age: null,
        sex: '',
        phone: ''
      },
      rules: {
        no: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', min: 1, message: '年龄必须是正整数', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ]
      },
      message: '',         // 添加的消息
      messageType: ''      // 消息类型（'success' 或 'error'）
    };
  },
  methods: {
    async handleRegister() {
      await this.$refs.registerForm.validate(async (valid) => {
        if (valid) {
          try {
            const response = await axios.post('http://localhost:8080/user/register', this.registerForm);
            console.log('注册成功:', response.data);
            this.message = response.data.msg || '注册成功';
            this.messageType = 'success';
            // 根据需要跳转到其他页面，或者清空表单
            // this.$router.push('/');
          } catch (error) {
            console.error('注册请求失败:', error);
            this.message = error.response.data.msg || '注册失败';
            this.messageType = 'error';
          }
        } else {
          console.log('表单验证失败');
          this.message = '表单验证失败，请检查输入内容';
          this.messageType = 'error';
          return false;
        }
      });
    },
    goToLogin() {
      this.$router.push('/');
    }
  }
};
</script>

<style>
.page-container {
  background-color: #eaf2f8;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-container {
  width: 500px;
  padding: 60px;
  border: 2px solid #ddd;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: white;
}

h2 {
  color: black;
}

.message {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.message.success {
  color: green;
  border: 1px solid green;
}

.message.error {
  color: red;
  border: 1px solid red;
}
</style>
